<form name="frmMock" class="form-horizontal" ng-init="dvm.init()" ng-submit="dvm.send(frmMock.$valid)" novalidate>
  <div class="modal-header">
    <button type="button" class="close" ng-click="dvm.close()">&times;</button>
    <h4 class="modal-title">测试MOCK接口</h4>
  </div>
  <div class="modal-body">
    <div class="form-group">
      <label class="col-md-2 control-label">Target URL：</label>
      <div class="col-md-10">
        <div url-select="dvm.url">
          <input name="url" type="text" class="form-control" ng-model="dvm.url" autofocus required
              pattern="^http(s)?://[\w-\.]+(:\d+)?(/[\w-\./\?%&=]*)?"
              ng-class="{'x-invalid': frmMock.$submitted && frmMock.url.$invalid}">
          <div class="input-group-addon">
            <label class="checkbox-inline">
              <input type="checkbox" ng-value="true" ng-model="dvm.cors"> CORS
            </label>
          </div>
        </div>
        <p class="text-danger" ng-show="frmMock.$submitted && frmMock.url.$error.required">Target URL 不能为空</p>
        <p class="text-danger" ng-show="frmMock.$submitted && frmMock.url.$error.pattern">Target URL 格式错误</p>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Method：</label>
      <div class="col-md-10">
        <select class="form-control" ng-model="dvm.method">
          <option value="GET" selected>GET</option>
          <option value="POST">POST</option>
          <option value="PUT">PUT</option>
          <option value="PATCH">PATCH</option>
          <option value="DELETE">DELETE</option>
        </select>
      </div>
    </div>
    <div class="form-group" ng-show="dvm.method != 'GET'">
      <label class="col-md-2 control-label">Request Body：</label>
      <div class="col-md-10" ng-class="{'x-full-screen x-frame': dvm.fullScreen}">
        <div class="x-editor">
          <pre id="data-request" style="height:200px"></pre>
        </div>
        <p class="text-danger" ng-show="frmMock.$submitted && !dvm.parsable">Request Body 格式错误</p>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Response Body：</label>
      <div class="col-md-10" ng-class="{'x-full-screen x-frame': dvm.fullScreen2}">
        <div class="x-editor">
          <pre class="x-output" id="data-response" style="height:200px"></pre>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="submit" class="btn btn-primary" ng-disabled="frmMock.$invalid || !dvm.completed">发送</button>
    <button id="copy-response" type="button" class="btn btn-success" ng-disabled="dvm.response == null">复制</button>
    <button type="button" class="btn btn-default" ng-click="dvm.close()">关闭</button>
  </div>
  <script type="text/ng-template" id="request-tools">
    <div class="x-editor-tool">
      <div class="x-toolbar btn-group">
        <button type="button" class="btn btn-default btn-xs" ng-click="dvm.fullScreen = !dvm.fullScreen"
            title="{{dvm.fullScreen ? '退出全屏' : '全屏'}}">
          <i class="fa" ng-class="{'fa-compress': dvm.fullScreen, 'fa-expand': !dvm.fullScreen}"></i></button>
      </div>
    </div>
  </script>
  <script type="text/ng-template" id="response-tools">
    <div class="x-editor-tool">
      <div class="x-toolbar btn-group">
        <button type="button" class="btn btn-default btn-xs" ng-click="dvm.fullScreen2 = !dvm.fullScreen2"
            title="{{dvm.fullScreen2 ? '退出全屏' : '全屏'}}">
          <i class="fa" ng-class="{'fa-compress': dvm.fullScreen2, 'fa-expand': !dvm.fullScreen2}"></i></button>
      </div>
    </div>
  </script>
</form>
